<template>
 <div class="page-box">
  	<div class="page-title"></div>
    <div class="page-main">
      <!-- 左1 -->
      <div class="page-main-small">
        <div class="page-grid">
          <div class="page-grid-title" style="position: relative;">
            <img src="../../assets/img/eachAdmin/title1.png" alt="">
          </div>
          <div class="page-grid-ec" style="position: relative;">
            <div class="time-pic absolute" style="right: 0px;">
              <div class="time-com "> {{Data01.times[0]}}至{{Data01.times[1]}}
                <img src="../../assets/img/realEstate/triangle.png" alt="">
                <timeSelect :type="1" timeType="1" @timeValueChange="timeValueChanges" ></timeSelect>
              </div>
            </div>
            <div class="grid-chart charH" >
              <barLinePublic style="height: 100%;"
                v-if="echarData01.xAxisData.length > 0"
                :housingSupplyStatsData="echarData01"
                @dialogData="dialogData"
              ></barLinePublic>
            </div>
          </div>
        </div>
      </div>
      <!-- center -->
      <div class="page-main-map" style="position: relative;">
        <div class="mapBox">
          <mapBox
              v-if="realEstateMiddleData.regions[0].length > 0"
              :housingSupplyStatsData="realEstateMiddleData"
              @mapNameChange="mapNameChange"
              style="height: 100%; width: 100%"
          ></mapBox>
          <div class="map-address">辽宁省{{ cityObj.cityName == "" ? "" : "-" + cityObj.cityName }}</div>
        </div>
        <div class="waterPolo">
          <div class="page-main-small">
            <div class="page-grid">
              <div class="page-grid-title" style="position: relative;">
                <img src="../../assets/img/eachAdmin/title9.png" alt="">
              </div>
              <div class="page-grid-ec">
                <div class="watter-lump">
                  <div class="sTitle1"></div>
                  <div class="grid-chart charH-water" >
                    <waterPolo style="height: 100%;"
                      v-if="echarData09.attrs.length > 0"
                      :housingSupplyStatsData="echarData09"
                      @dialogData="dialogData"
                    ></waterPolo>
                  </div>
                </div>
                <div class="watter-lump">
                  <div class="sTitle2"></div>
                  <div class="grid-chart charH-water" >
                    <waterPolo style="height: 100%;"
                      v-if="echarData10.attrs.length > 0"
                      :housingSupplyStatsData="echarData10"
                      @dialogData="dialogData"
                    ></waterPolo>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右1行 -->
      <div class="page-main-small">
        <div class="page-grid">
          <div class="page-grid-title" style="position: relative;">
            <img src="../../assets/img/eachAdmin/title2.png" alt="">
          </div>
          <div class="page-grid-ec" style="position: relative;">
            <div class="time-pic absolute" style="right: 0px;">
              <div class="time-com "> {{Data02.times[0]}}至{{Data02.times[1]}}
                <img src="../../assets/img/realEstate/triangle.png" alt="">
                <timeSelect :type="2" timeType="1" @timeValueChange="timeValueChanges" ></timeSelect>
              </div>
            </div>
            <div class="grid-chart charH" >
              <barLinePublic style="height: 100%;"
                v-if="echarData02.xAxisData.length > 0"
                :housingSupplyStatsData="echarData02"
                @dialogData="dialogData"
              ></barLinePublic>
            </div>
          </div>
        </div>
      </div>
      <!-- 左2行 -->
      <div class="page-main-small">
        <div class="half">
          <div class="half-l half-index">
            <div class="page-grid">
              <div class="page-grid-title page-grid-title-small" style="position: relative;">
                <img src="../../assets/img/eachAdmin/title3.png" alt="">
              </div>
              <div class="page-grid-ec" style="position: relative;">
                <div class="grid-chart charH-small" >
                  <barLinePublic style="height: 100%;"
                    v-if="echarData03.xAxisData.length > 0"
                    :housingSupplyStatsData="echarData03"
                    @dialogData="dialogData"
                  ></barLinePublic>
                </div>
              </div>
            </div>
          </div>
          <div class="halg-r half-index">
            <div class="page-grid">
              <div class="page-grid-title page-grid-title-small" style="position: relative;">
                <img src="../../assets/img/eachAdmin/title4.png" alt="">
              </div>
              <div class="page-grid-ec" style="position: relative;">
                <div class="time-pic absolute" style="right: 0px;">
                  <div class="time-com "> {{Data04.times[0]}}至{{Data04.times[1]}}
                    <img src="../../assets/img/realEstate/triangle.png" alt="">
                    <timeSelect :type="4" timeType="1" @timeValueChange="timeValueChanges" ></timeSelect>
                  </div>
                </div>
                <div class="grid-chart charH-small" >
                  <usePie style="height: 100%;"
                    v-if="echarData04.seriesData.length > 0"
                    :housingSupplyStatsData="echarData04"
                    @dialogPieData="dialogPieData"
                  ></usePie>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右2行 -->
      <div class="page-main-small">
        <div class="page-grid">
          <div class="page-grid-title" style="position: relative;">
            <img src="../../assets/img/eachAdmin/title5.png" alt="">
          </div>
          <div class="page-grid-ec" style="position: relative;">
            <div class="time-pic absolute" style="right: 0px;">
              <div class="time-com "> {{Data05.times[0]}}至{{Data05.times[1]}}
                <img src="../../assets/img/realEstate/triangle.png" alt="">
                <timeSelect :type="5" timeType="1" @timeValueChange="timeValueChanges" ></timeSelect>
              </div>
            </div>
            <div class="flex-box">
              <div class="flex-boxs">
                <div class="grid-chart charH-smalls" >
                  <usePie style="height: 100%;"
                    v-if="echarData05.seriesData.length > 0"
                    :housingSupplyStatsData="echarData05"
                    @dialogPieData="dialogPieData"
                  ></usePie>
                 </div>
                 <div class="bottom-title">房产交易</div>
              </div>
              <div class="flex-boxs">
                <div class="grid-chart charH-smalls" >
                  <usePie style="height: 100%;"
                    v-if="echarData055.seriesData.length > 0"
                    :housingSupplyStatsData="echarData055"
                    @dialogPieData="dialogPieData"
                  ></usePie>
                 </div>
                 <div class="bottom-title">住房保障</div>
              </div>
              <div class="flex-boxs">
                <div class="grid-chart charH-smalls" >
                  <usePie style="height: 100%;"
                    v-if="echarData0555.seriesData.length > 0"
                    :housingSupplyStatsData="echarData0555"
                    @dialogPieData="dialogPieData"
                  ></usePie>
                 </div>
                 <div class="bottom-title">物业管理</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 左3 -->
      <div class="page-main-small">
        <div class="page-grid">
          <div class="page-grid-title" style="position: relative;">
            <img src="../../assets/img/eachAdmin/title6.png" alt="">
          </div>
          <div class="page-grid-ec" style="position: relative;">
            <div class="time-pic absolute" style="right: 0px;">
              <div class="time-com "> {{Data06.times[0]}}至{{Data06.times[1]}}
                <img src="../../assets/img/realEstate/triangle.png" alt="">
                <timeSelect :type="6" timeType="1" @timeValueChange="timeValueChanges" ></timeSelect>
              </div>
            </div>
            <div class="grid-chart charH" >
              <usePie style="height: 100%;"
                    v-if="echarData06.seriesData.length > 0"
                    :housingSupplyStatsData="echarData06"
                    @dialogPieData="dialogPieData"
              ></usePie>
            </div>
          </div>
        </div>
      </div>
      <!-- 右3 -->
      <div class="page-main-small">
        <div class="half">
          <div class="half-l half-index">
            <div class="page-grid">
              <div class="page-grid-title page-grid-title-small" style="position: relative;">
                <img src="../../assets/img/eachAdmin/title7.png" alt="">
              </div>
              <div class="page-grid-ec" style="position: relative;">
                <div class="grid-chart charH-small" >
                  <barLinePublic style="height: 100%;"
                    v-if="echarData03.xAxisData.length > 0"
                    :housingSupplyStatsData="echarData03"
                    @dialogData="dialogData"
                  ></barLinePublic>
                </div>
              </div>
            </div>
          </div>
          <div class="halg-r half-index">
            <div class="page-grid">
              <div class="page-grid-title page-grid-title-small" style="position: relative;">
                <img src="../../assets/img/eachAdmin/title8.png" alt="">
              </div>
              <div class="page-grid-ec" style="position: relative;">
                <div class="time-pic absolute" style="right: 0px;">
                  <div class="time-com "> {{Data08.times[0]}}至{{Data08.times[1]}}
                    <img src="../../assets/img/realEstate/triangle.png" alt="">
                    <timeSelect :type="8" timeType="1" @timeValueChange="timeValueChanges" ></timeSelect>
                  </div>
                </div>
                <div class="grid-chart charH-small" >
                  <barLinePublic style="height: 100%;"
                    v-if="echarData08.xAxisData.length > 0"
                    :housingSupplyStatsData="echarData08"
                    @dialogData="dialogData"
                  ></barLinePublic>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
		</div>
    <magnify
    v-if="magnifyEchartData"
    :housingSupplyStatsData="magnifyEchartData"
    @closeDialog="closeDialog"
    ></magnify>
    <magnifyPie
      v-if="magnifyPieEchartData"
      :housingSupplyStatsData="magnifyPieEchartData"
      @closePieDialog="closePieDialog"
    ></magnifyPie>
	</div>
</template>

<script setup lang="ts">
import { ref,reactive, onMounted, onBeforeUnmount, computed } from 'vue';
import { barLineParamsData } from "@/utils/chartsPbulic";
import { getCityName } from '@/utils/cityList'
import mapBox from "@/components/realEstate/map.vue";
import barLinePublic from "@/components/public/barLinePbulic.vue";
import usePie from "@/components/public/pie.vue";
import timeSelect from "@/components/realEstate/timeSelect.vue";
import magnify from "@/components/public/magnify.vue";
import magnifyPie from "@/components/public/magnifyPie.vue";
import waterPolo from '@/components/eachAdmin/waterPolo.vue';


import {
  selectCityBusinessDistribute,
  selectCityBusinessTime,
  selectCityBusinessStatus,
  selectServiceQuality,
  selectTransactionTime,
  selectHouseDeal,
  selectHouseSafeguard,
  selectPropertyManagement,
  selectCityBusinessOverstocked,
  selectThermodynamic,
  selectMonthTransaction,
  selectTodayTransaction,
} from '@/api/eachAdmin'
// 初始化数据
const echarData01 = ref({
   xAxisData: [],
})
const echarData02 = ref({
    xAxisData: [],
})
const echarData03 = ref({
    xAxisData: [],
})
const echarData04 = ref({
    seriesData:[],
})
const echarData05 = ref({
    seriesData:[],
})
const echarData055 = ref({
    seriesData:[],
})
const echarData0555 = ref({
    seriesData:[],
})
const echarData06 = ref({
    seriesData:[],
})
const echarData07 = ref({
   xAxisData: [],
})
const echarData08 = ref({
    xAxisData: [],
})
const echarData09 = ref({
    attrs: [],
    datas: [],
})
const echarData10 = ref({
    attrs: [],
    datas: [],
})
const Data01 = ref({
  times:'',
})
const Data02 = ref({
  times:'',
})
const Data03 = ref({
  times:'',
})
const Data04 = ref({
  times:'',
})
const Data05 = ref({
  times:'',
})
const Data06 = ref({
  times:'',
})
const Data08 = ref({
  times:'',
})
const realEstateMiddleData = ref({//地图
  regions: [[]],
});
const cityObj = ref({
  cityName: "",
  cityCode: "",
});
const fixedCityCode =   localStorage.getItem("cityCode")
const magnifyEchartData = ref(null)//弹框
const magnifyPieEchartData = ref(null)//饼图弹框

const getEcharData01 = async() => {
  let { data } = await selectCityBusinessDistribute({ cityCode: cityObj.value.cityCode,startMonth:Data01.value.times[0],endMonth:Data01.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
 let legendStyle = {
    show: true,
    icon:'',
    left: 10,
    top: 10,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "3%",
    right: "3%",
    bottom: "5%",
    top: "22%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "",
        type: "1",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#55BBEB",
        b: "#074083",
      },
      {
        a: "#F0C44B",
        b: "#E38319",
      },
            {
        a: "#E47D7D",
        b: "#CC3E3E",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData01.value = paramsData
}
const getEcharData02 = async() => {
  let { data } = await selectCityBusinessTime({ cityCode: cityObj.value.cityCode,startMonth:Data02.value.times[0],endMonth:Data02.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
 let legendStyle = {
    show: true,
    icon:'',
    left: 10,
    top: 10,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "3%",
    right: "3%",
    bottom: "5%",
    top: "22%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "",
        type: "1",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#55BBEB",
        b: "#074083",
      },
      {
        a: "#F0C44B",
        b: "#E38319",
      },
            {
        a: "#E47D7D",
        b: "#CC3E3E",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData02.value = paramsData
}
const getEcharData03 = async() => {
  let { data } = await selectCityBusinessStatus({ cityCode: cityObj.value.cityCode});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
	let legendStyle = {
    show: true,
    left: 5,
    top: 15,
    itemWidth: 18,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "25%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "",
        type: "1",
      },
      
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#24E1E7",
        b: "#086063",
      },
      {
        a: "#EFC24A",
        b: "#8A670A",
      },
            {
        a: "#4F73E7",
        b: "#183FB9",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData03.value = paramsData
}
const getEcharData04 = async() => {
 let { data } = await selectServiceQuality({ cityCode: cityObj.value.cityCode,startMonth:Data04.value.times[0],endMonth:Data04.value.times[1]});
 let colors = ['#25E7EE','#3662EC','#25AEEE']
 data.resultList.map((i,index) => {
   i.itemStyle = {color: colors[index]}
 })
 let paramsData = {
      gridStyle:{
        show:true
      },
      legendStyle:{
        show: false,
        orient:'vertical',
        icon: "rect",
        top:15,
        bottom: 0,
        right:100,
        itemWidth: 12,
        itemHeight: 12,
        itemGap:20,
       
    },
     seriesStyle:{
        radius: [50, 90],
        center: ['50%', '55%'],
        minAngle: pxToRem(10),
        emphasis: {
        },
        label: {
        show: false,
        position: 'center'
       },
        emphasis: {
          label: {
            show: true,
            fontSize: pxToRem(20),
            color: '#Fff',
            formatter: '{b} \n\n{c}'
          }
        },

    },
    seriesData:[data.resultList]      
 }
 echarData04.value = paramsData
}
const getEcharData05 = async() => {
 let { data } = await selectHouseDeal({ cityCode: cityObj.value.cityCode,startMonth:Data05.value.times[0],endMonth:Data05.value.times[1]});
 let colors = ['#2586EE','#3662EC','#67EB7D','#E5FC64','#F0C34B','#E4871D','#E55151','#00979C','#25E7EE','#25AEEE','']
 data.resultList.map((i,index) => {
   i.itemStyle = {color: colors[index]}
 })
 let paramsData = {
      gridStyle:{
        show:true
      },
      legendStyle:{
        show: false,
        orient:'vertical',
        icon: "rect",
        top:15,
        bottom: 0,
        right:100,
        itemWidth: 12,
        itemHeight: 12,
        itemGap:20,
       
    },
     seriesStyle:{
        radius: [50, 80],
        center: ['50%', '55%'],
        minAngle: pxToRem(10),
        emphasis: {
        },
        label: {
        show: false,
        position: 'center'
       },
        emphasis: {
          label: {
            show: true,
            fontSize: pxToRem(20),
            color: '#Fff',
            formatter: '{b} \n\n{c}'
          }
        },

    },
    seriesData:[data.resultList]      
 }
 echarData05.value = paramsData
}
const getEcharData055 = async() => {
 let { data } = await selectHouseSafeguard({ cityCode: cityObj.value.cityCode,startMonth:Data05.value.times[0],endMonth:Data05.value.times[1]});
 let colors = ['#2586EE','#3662EC','#67EB7D','#E5FC64','#F0C34B','#E4871D','#E55151','#00979C','#25E7EE','#25AEEE','']
 data.resultList.map((i,index) => {
   i.itemStyle = {color: colors[index]}
 })
 let paramsData = {
      gridStyle:{
        show:true
      },
      legendStyle:{
        show: false,
        orient:'vertical',
        icon: "rect",
        top:15,
        bottom: 0,
        right:100,
        itemWidth: 12,
        itemHeight: 12,
        itemGap:20,
       
    },
     seriesStyle:{
        radius: [50, 80],
        center: ['50%', '55%'],
        minAngle: pxToRem(10),
        emphasis: {
        },
        label: {
        show: false,
        position: 'center'
       },
        emphasis: {
          label: {
            show: true,
            fontSize: pxToRem(20),
            color: '#Fff',
            formatter: '{b} \n\n{c}'
          }
        },

    },
    seriesData:[data.resultList]      
 }
 echarData055.value = paramsData
}
const getEcharData0555 = async() => {
 let { data } = await selectPropertyManagement({ cityCode: cityObj.value.cityCode,startMonth:Data05.value.times[0],endMonth:Data05.value.times[1]});
 let colors = ['#2586EE','#3662EC','#67EB7D','#E5FC64','#F0C34B','#E4871D','#E55151','#00979C','#25E7EE','#25AEEE','']
 data.resultList.map((i,index) => {
   i.itemStyle = {color: colors[index]}
 })
 let paramsData = {
      gridStyle:{
        show:true
      },
      legendStyle:{
        show: false,
        orient:'vertical',
        icon: "rect",
        top:15,
        bottom: 0,
        right:100,
        itemWidth: 12,
        itemHeight: 12,
        itemGap:20,
       
    },
     seriesStyle:{
        radius: [50, 80],
        center: ['50%', '55%'],
        minAngle: pxToRem(10),
        emphasis: {
        },
        label: {
        show: false,
        position: 'center'
       },
        emphasis: {
          label: {
            show: true,
            fontSize: pxToRem(20),
            color: '#Fff',
            formatter: '{b} \n\n{c}'
          }
        },

    },
    seriesData:[data.resultList]      
 }
 echarData0555.value = paramsData
}
const getEcharData06 = async() => {
 let { data } = await selectTransactionTime({ cityCode: cityObj.value.cityCode,startMonth:Data06.value.times[0],endMonth:Data06.value.times[1]});
 let colors = ['#25E7EE','#F0C34B','#E4871D','#E5FC64','#2586EE']
 data.resultList.map((i,index) => {
   i.itemStyle = {color: colors[index]}
 })
 let paramsData = {
      gridStyle:{
        show:true
      },
      legendStyle:{
        show: true,
        orient:'vertical',
        icon: "rect",
        top:60,
        bottom: 0,
        right:30,
        itemWidth: 24,
        itemHeight: 12,
        itemGap:20,
        formatter:function(name){
         let total = 0;
         let target;
         let rate;
          for (var i = 0; i < data.resultList.length; i++) {
            total += data.resultList[i].value;
            if (data.resultList[i].name == name) {
               target = data.resultList[i].value;
               rate = data.resultList[i].rate;
            }
         }
         return `{one|时长：${name}}{two|数量：${target}}    {three|占比：${rate}}`;
        },

    },
     seriesStyle:{
        radius: [60, 100],
        center: ['25%', '50%'],
        minAngle: pxToRem(10),
        emphasis: {
        },
        label: {
        show: false,
        position: 'center'
       },
        emphasis: {
          label: {
            show: true,
            fontSize: pxToRem(20),
            color: '#Fff',
            formatter: '{b} \n\n{c}'
          }
        },

    },
    seriesData:[data.resultList]      
 }
  echarData06.value = paramsData
}
const getEcharData08 = async() => {
  let { data } = await selectCityBusinessOverstocked({ cityCode: cityObj.value.cityCode,startMonth:Data08.value.times[0],endMonth:Data08.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
 let legendStyle = {
    show: true,
    icon:'',
    left: 10,
    top: 10,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "3%",
    right: "3%",
    bottom: "5%",
    top: "22%",
  };
  let paramsData = barLineParamsData(
    [],
    data.abscissaList,
    [
      {
        name: "",
        type: "1",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#E47D7D",
        b: "#CC3E3E",
      },
      {
        a: "#F0C44B",
        b: "#E38319",
      },
            {
        a: "#E47D7D",
        b: "#CC3E3E",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData08.value = paramsData
}
const getEcharData09 = async() => {
  let { data } = await selectMonthTransaction({ cityCode:cityObj.value.cityCode});
  data.resultList[0].center_l = '15%';
  data.resultList[1].center_l = '50%';
  data.resultList[2].center_l = '85%';
  echarData09.value.attrs = data.resultList
  echarData09.value.datas[0] =  [data.resultList[0].rate,data.resultList[0].rate]
  echarData09.value.datas[1] =  [data.resultList[1].rate,data.resultList[1].rate]
  echarData09.value.datas[2] =  [data.resultList[2].rate,data.resultList[2].rate]
}
const getEcharData10 = async() => {
  let { data } = await selectTodayTransaction({ cityCode: cityObj.value.cityCode});
  data.resultList[0].center_l = '15%';
  data.resultList[1].center_l = '50%';
  data.resultList[2].center_l = '85%';
  echarData10.value.attrs = data.resultList
  echarData10.value.datas[0] =  [data.resultList[0].rate,data.resultList[0].rate]
  echarData10.value.datas[1] =  [data.resultList[1].rate,data.resultList[1].rate]
  echarData10.value.datas[2] =  [data.resultList[2].rate,data.resultList[2].rate]
}
// 地图
const realEstateMiddle = async() => {
  let { data } = await selectThermodynamic({ adcode: cityObj.value.cityCode });
  let inventoryRegionDTOS = data.map((item: any) => ({
    name: item.cityName,
    value: [item.houseCount,item.peopleCount],
    code: item.cityCode,
    selected: fixedCityCode == item.cityCode ? true:false
  }));
  
  let seriesData = [ inventoryRegionDTOS];
  let paramsData = {
    regions: seriesData,
  };
  realEstateMiddleData.value = paramsData
}
// 获取城市名
const mapNameChange = (e) => {
  if (cityObj.value.cityName == e.cityName) {
    cityObj.value = {
      cityName: "",
      cityCode: "",
    };
    allFun();
  } else {
    cityObj.value = e;
    console.log(cityObj.value)
    allFun();
  }
}
//合并柱状折线图数据
const getLineBarArr = (policy: Array<number>,resul: Array<number>): Array<any>=>{
  let type = []
  for(let i = 0 ; i< policy.length;i++){
  type.push(1)
  }
  for(let i = 0 ; i < resul.length;i++){
    type.push(2);
    policy.push(resul[i]);
  }
  return[policy,type]

} 
// 初始化时间
const defaultTime = () => {
  let t = new Date()
  let tYear = t.getFullYear()
  let tYear1 = t.getFullYear()-1
  let tMonth1 = t.getMonth()
  let tMonth2 = t.getMonth()+1
  let tArr = []
  if(tMonth1 < 10){
    tMonth1 = '0' + tMonth1
  }
  if(tMonth2 < 10){
    tMonth2 = '0' + tMonth2
  }
  Data01.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data02.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data03.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data04.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data05.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data06.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data08.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
}
// 获取时间组件时间
const timeValueChanges = (va) => {
 if(va.type == 1){
  Data01.value.times = va.times
  getEcharData01()
 }else if(va.type == 2){
  Data02.value.times = va.times
  getEcharData02()
 }else if(va.type == 3){
  Data03.value.times = va.times
  getEcharData03()
 }else if(va.type == 4){
  Data04.value.times = va.times
  getEcharData04()
 }else if(va.type == 5){
  Data05.value.times = va.times
  getEcharData05()
  getEcharData055()
  getEcharData0555()
 }else if(va.type == 6){
  Data06.value.times = va.times
  getEcharData06()
 }else if(va.type == 8){
  Data08.value.times = va.times
  getEcharData08()
 }
}
// 字体自适应方法
const pxToRem = (px: number) => {
  const scale = document.documentElement.clientWidth / 1920;
  return Math.round(px * Math.min(scale, 3));
};
// 打开弹框
const dialogData = (val) => {
  magnifyEchartData.value = val
}
//关闭弹框
const closeDialog = (val) => {
  magnifyEchartData.value = null
}
// 打开饼图弹框
const dialogPieData = (val) => {
  magnifyPieEchartData.value = val
}
//关闭饼图弹框
const closePieDialog = (val) => {
  magnifyPieEchartData.value = null
}
const allFun = () => {
  defaultTime()
  getEcharData01()
	getEcharData02()
	getEcharData03()
	getEcharData04()
	getEcharData05()
  getEcharData055()
  getEcharData0555()
	getEcharData06()
  getEcharData08()
  getEcharData09()
  getEcharData10()
	realEstateMiddle()
}
allFun();
onMounted(() => {
  cityObj.value = getCityName(fixedCityCode)
});
</script>
<style lang="less" scoped>
.mRight8{
	margin-right: 8px;
}
.page-box{
 width: 100vw;
 height: 100vh;
 background-image: url('../../assets/img/eachAdmin/pageBg.png');
 background-size: 100% 100%;
 background-repeat: no-repeat;
 overflow: hidden;
 .page-title{
  width: 100vw;
  height: 85px;
  margin-bottom: 26px;
  background-image: url('../../assets/img/eachAdmin/headBg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
 }
 .page-main{
  width: 100vw;
  height: calc(100vh - 111px);
  display: grid;
  grid-template-columns: repeat(3, 600px);
  grid-template-rows: repeat(3, 300px);
  grid-gap: 20px 10px;
  place-content: start center;
  box-sizing: border-box;
  .page-main-small{
    .page-grid{
    width: 100%;
    .page-grid-title{
     height: 43px;
     width: 100%;
     margin-bottom: 3px;
     img{
      width: 100%;
      height: 100%;
     }
    }
    .page-grid-title-small{
      height: 23px;
      width: 100%;
      margin-bottom: 3px;
    }
    .page-grid-ec{
     background: rgba(27,126,242,0.1);
     border-radius: 0px 0px 0px 0px;
     border: 1px solid rgba(27,126,242,0.4);
     .time-pic{
				width: 100%;
        height: 31px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 8px;
        .time-title{
          color:#7A8594;
          font-size: 14px;
          padding-left: 20px;
        }
      .time-com{
       padding-left: 15px;
       padding-right: 5px;
       height: 20px;
       background: rgba(27,126,242,0.2);
       border-radius: 0px 0px 0px 0px;
       border: 1px solid rgba(41,240,250,0.6);
       font-weight: 400;
       font-size: 12px;
       color: #FFFFFF;
       letter-spacing: 1px;
       text-align: right;
			 width:170px;
       position: absolute;
       right: 5px;
       top: 10px;
       z-index: 2;
        img{
          width: 9px;
          height: 6px;
          position: relative;
          bottom: 2px;
          right: 0px;
          margin-right: 4px;
        }
      }
      .time-coms{
        width:150px;
      }
      .time-com:hover{
        // cursor: pointer;
      }
     }
    }
   }
  }
		.page-main-map{
      grid-column: 2 / 2;
      grid-row: 1 / 4;
						padding-top: 50px;
						.mapBox{
								width: 621px;
								height: 400px;
						}
		}
		.half{
      display: flex;
      justify-content: space-between;
      .half-index{
        width: 49%;
      }
      .half-b{
        width: 33%;
      }
    }
	}
}
.flex-box{
  display: flex;
  justify-content: space-between;
  height: 100%;
  .flex-boxs{
    width: 33%;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
    box-sizing: border-box;
  }
  .bottom-title{
    font-size: 18px;
    color:#8EA1E2;
    
  }
}
.waterPolo{
  margin-top: 30px;
  
  .watter-lump{
    .sTitle1{
      background: url('../../assets/img/eachAdmin/sTitle1.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 23px;
    }
    .sTitle2{
      background: url('../../assets/img/eachAdmin/sTitle2.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 23px;
    }
  }
  .page-grid-ec{
    padding: 20px;
    height: 413px;
    box-sizing: border-box;
  }
}
.map-address {
  position: absolute;
  top: 0px;
  left: 0px;
  letter-spacing: 1px;
  text-shadow: 0px 1px 2px #c1731c;
  font-size: 18px;
  color: #60f9f4;
  letter-spacing: 1.2px;
  margin-left: 27px;
}

.map-address::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -27px;
  width: 20px;
  height: 20px;
  background: url("@/assets/img/personInfor/map-address.png");
  background-size: 100% 100%;
}
.charH{
    height: 251px;
}
.charH-small{
    height: 270px;
}
.charH-smalls{
    height: 218px;
}
.charH-water{
    height:170px; 
}
/deep/ .el-range-editor.el-input__wrapper{
  width: 135px ;
  height: 16px;
  position: absolute;
  top: 0px;
  right:0px;
}
/deep/ .el-radio.el-radio--large {
  color:white;
  margin-right:18px;
}

</style>